黎明 15:48:23
<template>
  <div class="content">
    <div>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="box-bg">
            <div class="elicon">
              <el-icon :size="40" color="#40C9C6">
                <Grid />
              </el-icon>
              <div class="hidden-sm-only">
                <div>商品数量</div>
                <count-to :startVal="0" :endVal="quantity" :duration="3000"></count-to>
              </div>
            </div>
            <div class="elicon">
              <el-icon :size="40" color="#36A3F7">
                <ChatDotSquare />
              </el-icon>
              <div class="hidden-sm-only">
                <div>未发货单</div>
                <count-to :startVal="0" :endVal="waitStockCounts" :duration="3000"></count-to>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 柱形图 -->
        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
          <div id="columnChart" ref="column"></div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row>
        <!-- 折线图 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <div id="lineChart" ref="line"></div>
        </el-col>
        <!-- 饼状图 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <div id="pieChart" ref="pie"></div>
        </el-col>
        <!-- 饼状图2 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <div id="pieCharts" ref="pies"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Grid, ChatDotSquare } from '@element-plus/icons-vue';
import 'element-plus/theme-chalk/display.css'
import * as echarts from 'echarts';
import { CountTo } from "vue3-count-to";
import { ref } from 'vue';
import { post } from '@/http/request'
type EChartsOption = echarts.EChartsOption
const quantity = ref()
const waitStockCounts = ref()

const king = () => {
  let data = {
    _gp: 'admin.dashboard',
    _mt: 'integral'
  }
  post(data).then((res) => {
    console.log(res);
    let { daysOrder, channel, area, daysSum, goodsCount, waitStockCount } = res.data
    quantity.value = goodsCount
    waitStockCounts.value = waitStockCount
    // 柱形图
    let columnChart = document.getElementById('columnChart')!;
    let column = echarts.init(columnChart);
    // 折线图
    let lineChart = document.getElementById('lineChart')!;
    let line = echarts.init(lineChart);
    // 饼状图
    let pieChart = document.getElementById('pieChart')!;
    let pie = echarts.init(pieChart);
    // 饼状图2
    let pieCharts = document.getElementById('pieCharts')!;
    let pies = echarts.init(pieCharts);

    // 柱形图
    let columnOption: EChartsOption = {
      title: {
        text: '七日订单',
        subtext: '订单数',
        left: 'left'
      },
      legend: {
        data: ['订单数'],
        left: 'right'
      },
      xAxis: {
        type: 'category',
        data: daysOrder[0]    //日期
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '订单数',
          type: 'bar',
          barWidth: '30%',       //柱子大小
          color: ['#3EA6F7'],   //柱子颜色
          emphasis: { focus: 'series' },
          data: daysOrder[1]    //数据
        },
      ]
    };
    // 折线图
    let lineOption: EChartsOption = {
      title: {
        text: '7日成交金额',
        subtext: '订单数',
        left: 'left'
      },
      legend: {
        data: ['订单数'],
        left: 'right'
      },
      xAxis: {
        type: 'category',
        data: daysSum[0]    //日期
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '订单数',
          type: 'line',
          emphasis: {
            focus: 'series'
          },
          data: daysSum[1]    //数据
        },
      ]
    };
    //饼状图
    let pieOption = {
      title: {
        text: '订单地区分布',
        left: 'left'
      },
      legend: {
        data: ['地区分布'],
        left: 'right'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: area,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    //饼状图2
    let pieOptions = {
      title: {
        text: '订单渠道分布',
        left: 'left'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: channel,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    // 柱形图
    columnOption && column.setOption(columnOption);
    // 折线图
    lineOption && line.setOption(lineOption);
    //饼状图
    pieOption && pie.setOption(pieOption);
    //饼状图2
    pieOptions && pies.setOption(pieOptions);
    window.onresize = function () {
      // echarts图表自适应resize方法
      column.resize();
      line.resize();
      pie.resize();
      pies.resize();
    };
  })
}
king()

</script>

<style lang="less" scoped>
.content {
  padding: 0px 40px;
  margin-top: 30px;

  .box-bg {
    height: 340px;

    .elicon {
      height: 80px;
      padding: 0px 20px;
      margin-top: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0px 0px 20px 0px #e3e2e2;
    }
  }

  // 柱形图
  #columnChart {
    width: 80%;
    margin: auto;
    height: 340px;
  }

  // 折线图
  #lineChart {
    width: 100%;
    height: 300px;
  }

  // 饼图
  #pieChart {
    width: 100%;
    height: 300px;
  }

  // 饼图2
  #pieCharts {
    width: 100%;
    height: 300px;
  }
}
</style>